{% extends "base.html" %}
{% block outer_body %}
    <body class="border-primary d-flex flex-column">
    <div class="page page-center">
        <div class="container-tight py-4">
            <form class="card card-md" action="{{ ADMIN_PATH }}/login" method="post" autocomplete="off">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">{{ _('login_title') }}</h2>
                    <div class="mb-3">
                        <label class="form-label">{{ _('username') }}</label>
                        <input name="username" type="text" class="form-control">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">
                            {{ _('password') }}
                            <span class="form-label-description">
                  <a href="{{ ADMIN_PATH }}/password/forgot">{{ _('forgot_password') }}</a>
                </span>
                        </label>
                        <div class="input-group input-group-flat">
                            <input name="password" type="password" class="form-control" autocomplete="off">
                            <span class="input-group-text">
                </span>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="form-check">
                            <input type="checkbox" class="form-check-input"/>
                            <span class="form-check-label">{{ _('remember_me') }}</span>
                        </label>
                    </div>
                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary w-100">{{ _('sign_in') }}</button>
                    </div>
                </div>
            </form>
            <div class="text-center text-muted mt-3">
                {{ _('sign_up_tips') }} <a href="{{ ADMIN_PATH }}/signup" tabindex="-1">{{ _('sign_up') }}</a>
            </div>
        </div>
    </div>
    </body>
{% endblock %}
